<template>
    <div>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="未发货" name="first">
 
<el-table :data="order1.slice((currpage - 1) * pagesize, currpage * pagesize)"
:span-method="objectSpanMethod1"
  v-loading="listLoading" border style="width: 100%">
	    	<el-table-column type="index" width="60">
			</el-table-column>
            <!-- <el-table-column prop="random" label="姓名" width="120" sortable>
			</el-table-column> -->
			<el-table-column prop="o_name" label="姓名" width="80" sortable>
			</el-table-column>
			<el-table-column prop="o_address" label="地址" width="250" sortable>
			</el-table-column>
			<el-table-column prop="o_number" label="电话号" width="120" sortable>
			</el-table-column>
            <el-table-column prop="o_data" label="付款时间" width="100" sortable>
			</el-table-column>
                 <el-table-column prop="c_img" label="商品图" width="120" sortable>
                 <template   slot-scope="scope">            
                    <img :src="scope.row.c_img"  min-width="80" height="80" />
                 </template>         
			</el-table-column>
            <el-table-column prop="c_name" label="商品名" width="150" sortable>
			</el-table-column>
            <el-table-column prop="style" label="款式" width="120" sortable>
			</el-table-column>
             <el-table-column prop="num" label="数量" width="100" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template  scope="scope">
					<el-button size="small" @click="fahuo(scope.row.random,scope.row.o_id)">
                        {{scope.row.status}}</el-button>
				</template>
			</el-table-column>
	        
	    </el-table>
		<el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			:total="order1.length"
			@current-change="handleCurrentChange"  
			@size-change="handleSizeChange" 
             style="float:right;"
			>
		</el-pagination>


    </el-tab-pane>
    <el-tab-pane label="已发货" name="second">
<el-table :data="order2.slice((currpage - 1) * pagesize, currpage * pagesize)"
:span-method="objectSpanMethod2"
  v-loading="listLoading" border style="width: 100%">
	    	<el-table-column type="index" width="60">
			</el-table-column>
            <!-- <el-table-column prop="random" label="姓名" width="120" sortable>
			</el-table-column> -->
			<el-table-column prop="o_name" label="姓名" width="80" sortable>
			</el-table-column>
			<el-table-column prop="o_address" label="地址" width="250" sortable>
			</el-table-column>
			<el-table-column prop="o_number" label="电话号" width="120" sortable>
			</el-table-column>
            <el-table-column prop="o_data" label="付款时间" width="100" sortable>
			</el-table-column>
                 <el-table-column prop="c_img" label="商品图" width="120" sortable>
                 <template   slot-scope="scope">            
                    <img :src="scope.row.c_img"  min-width="80" height="80" />
                 </template>         
			</el-table-column>
            <el-table-column prop="c_name" label="商品名" width="150" sortable>
			</el-table-column>
            <el-table-column prop="style" label="款式" width="120" sortable>
			</el-table-column>
             <el-table-column prop="num" label="数量" width="100" sortable>
			</el-table-column>
			<!-- <el-table-column label="操作" width="150">
				<template  scope="scope">
					<el-button size="small" @click="fahuo(scope.row.random,scope.row.o_id)">
                        {{scope.row.status}}</el-button>
				</template>
			</el-table-column> -->
	        
	    </el-table>
		<el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			:total="order1.length"
			@current-change="handleCurrentChange"  
			@size-change="handleSizeChange" 
             style="float:right;"
			>
		</el-pagination>


    </el-tab-pane>
    <el-tab-pane label="已收货" name="third">

<el-table :data="order3.slice((currpage - 1) * pagesize, currpage * pagesize)"
:span-method="objectSpanMethod3" 
  border style="width: 100%">
	    	<el-table-column type="index" width="60">
			</el-table-column>
            <!-- <el-table-column prop="random" label="姓名" width="120" sortable>
			</el-table-column> -->
			<el-table-column prop="o_name" label="姓名" width="80" sortable>
			</el-table-column>
			<el-table-column prop="o_address" label="地址" width="250" sortable>
			</el-table-column>
			<el-table-column prop="o_number" label="电话号" width="120" sortable>
			</el-table-column>
            <el-table-column prop="o_data" label="付款时间" width="100" sortable>
			</el-table-column>
                 <el-table-column prop="c_img" label="商品图" width="120" sortable>
                 <template   slot-scope="scope">            
                    <img :src="scope.row.c_img"  min-width="80" height="80" />
                 </template>         
			</el-table-column>
            <el-table-column prop="c_name" label="商品名" width="150" sortable>
			</el-table-column>
            <el-table-column prop="style" label="款式" width="120" sortable>
			</el-table-column>
             <el-table-column prop="num" label="数量" width="100" sortable>
			</el-table-column>
			<!-- <el-table-column label="操作" width="150">
				<template  scope="scope">
					<el-button size="small" @click="fahuo(scope.row.random,scope.row.o_id)">
                        {{scope.row.status}}</el-button>
				</template>
			</el-table-column> -->
	        
	    </el-table>
		<el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="pagesize"
			:total="order1.length"
			@current-change="handleCurrentChange"  
			@size-change="handleSizeChange" 
             style="float:right;"
			>
		</el-pagination>

    </el-tab-pane>
  </el-tabs>
    </div>
</template>

<script>
export default {
    inject:['reload'],
data () {
    return {
         activeName: 'first',
         res:"",
          order1:[],
          order2:[],
          order3:[],
      status0:0,
      status1:0,
      status2:0,
      show:false,
      msg: 8888,
				pagesize: 10,
                currpage: 1,
                listLoading:false,
                spanArr1:[],
                position1:"",
                  spanArr2:[],
                position2:"",
                 spanArr3:[],
                position3:""
    }
},
methods: {
     handleClick(tab, event) {
        console.log(tab, event);
      },
      handleCurrentChange(cpage) {
					this.currpage = cpage;
				},
				handleSizeChange(psize) {
					this.pagesize = psize;
				},

        datas(time)
    {
      // console.log(time)
      var date = new Date(parseInt(time) + 8 * 3600 * 1000); // 增加8小时
      // console.log(date.toJSON())
    return date.toJSON().substr(0, 19).replace('T', ' ');
    },
     objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
          if(columnIndex === 0||columnIndex === 1||columnIndex === 2||columnIndex === 3||columnIndex === 4||columnIndex === 9){  //序号列也进行合并(第一列)
          //this.spanArr这个数组里面存的是table里面连续的有几条数据相同
          //例如:[1,1,2,0,2,0]
          //1  代表的没有连续的相同的
          //2  代表连续的两个相同
          //0  代表是和上一条内容相同
          const _row = this.spanArr1[rowIndex];
          const _col = _row>0 ? 1 : 0;
        //   console.log("ppp")
        //   console.log(_row)
        //   console.log(_col)
          return {
            rowspan: _row, //行
            colspan: _col  //列
          }

        }
      },
       objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
          if(columnIndex === 0||columnIndex === 1||columnIndex === 2||columnIndex === 3||columnIndex === 4){  //序号列也进行合并(第一列)
          //this.spanArr这个数组里面存的是table里面连续的有几条数据相同
          //例如:[1,1,2,0,2,0]
          //1  代表的没有连续的相同的
          //2  代表连续的两个相同
          //0  代表是和上一条内容相同
          const _row = this.spanArr2[rowIndex];
          const _col = _row>0 ? 1 : 0;
        //   console.log("ppp")
        //   console.log(_row)
        //   console.log(_col)
          return {
            rowspan: _row, //行
            colspan: _col  //列
          }

        }
      },
       objectSpanMethod3({ row, column, rowIndex, columnIndex }) {
          if(columnIndex === 0||columnIndex === 1||columnIndex === 2||columnIndex === 3||columnIndex === 4){  //序号列也进行合并(第一列)
          //this.spanArr这个数组里面存的是table里面连续的有几条数据相同
          //例如:[1,1,2,0,2,0]
          //1  代表的没有连续的相同的
          //2  代表连续的两个相同
          //0  代表是和上一条内容相同
          const _row = this.spanArr3[rowIndex];
          const _col = _row>0 ? 1 : 0;
        //   console.log("ppp")
        //   console.log(_row)
        //   console.log(_col)
          return {
            rowspan: _row, //行
            colspan: _col  //列
          }

        }
      },
    getorder()
    {
        // this.listLoading=true;
        this.$axios.post("http://127.0.0.1:8081/admin/getorder").then(res=>
        {if(res.data.status==1)
        {
            this.res=res.data.result;
             this.show=true;
         this.res=res.data.result;
         var val=res.data.result;
      //  console.log(val)
      //  this.order=JSON.parse(val[0].o_content);
    //   this.listLoading=false;
       for(let i=0;i<val.length;i++)
       {
           let vals=JSON.parse(val[i].o_content);
        //    console.log("vals",vals)
         for(let j=0;j<vals.length;j++)
         {
            //  console.log(vals[j].list);
             for(let n=0;n<vals[j].list.length;n++)
             {
                 let zhi={}
                 zhi.o_name=val[i].o_name;
                    zhi.o_address=val[i].o_address;
                    zhi.o_number=val[i].o_number;
                    zhi.o_data=this.datas(val[i].o_data);
                    zhi.o_id=val[i].o_id;
                    zhi.random=vals[j].random;
                    zhi.c_img=vals[j].list[n].c_img;
                    zhi.c_name=vals[j].list[n].c_name;
                    zhi.num=vals[j].list[n].c_num;
                    zhi.style="";
                  for(let m in vals[j].list[n].c_style)
                  {
                      zhi.style=zhi.style+vals[j].list[n].c_style[m];
                  }
                //  console.log("style",vals[j].list[n].c_style)
                     if(vals[j].status==0)

            {
                zhi.status="点击发货";
                this.order1.push(zhi)
            }
            else if(vals[j].status==1)
            {
                this.order2.push(zhi)

            }
            else {
                this.order3.push(zhi)

            }

            
             }
            

            // if(vals[j].status==0)
            // {
            //     this.order1.push(val[j])
            // }
            // else if(vals[j].status==1)
            // {
            //     this.order2.push(val[j])

            // }
            // else {
            //     this.order3.push(val[j])

            // }
        //    console.log("vals.status",vals[j])
         } 
        
       }
       this.spanArr1= [];//在data里面定义
        this.position1 = 0; //在data里面定义
        this.order1.forEach((item,index) => {
          if( index === 0){
            this.spanArr1.push(1);
            this.position1 = 0;
            item.sequence=index+1;//设置序号
          }else{
            if(this.order1[index].random === this.order1[index-1].random ){
              this.spanArr1[this.position1] += 1;//连续有几行项目名名称相同
              this.spanArr1.push(0); // 名称相同后往数组里面加一项0
            //   console.log(this.spanArr)
              //当项目名称相同时，设置当前序号和前一个相同
              this.order1[index].sequence = this.order1[index-1].sequence;
            }else{
              this.spanArr1.push(1);
              this.position1 = index;
              //当项目名称不同时，将当前序号设置为前一个序号+1
              this.order1[index].sequence = this.order1[index-1].sequence+1;
            }
          }
        })

        this.order2.forEach((item,index) => {
          if( index === 0){
            this.spanArr2.push(1);
            this.position2 = 0;
            item.sequence=index+1;//设置序号
          }else{
            if(this.order2[index].random === this.order2[index-1].random ){
              this.spanArr2[this.position2] += 1;//连续有几行项目名名称相同
              this.spanArr2.push(0); // 名称相同后往数组里面加一项0
            //   console.log(this.spanArr)
              //当项目名称相同时，设置当前序号和前一个相同
              this.order2[index].sequence = this.order2[index-1].sequence;
            }else{
              this.spanArr2.push(1);
              this.position2 = index;
              //当项目名称不同时，将当前序号设置为前一个序号+1
              this.order2[index].sequence = this.order2[index-1].sequence+1;
            }
          }
        })
           this.order3.forEach((item,index) => {
         if( index === 0){
            this.spanArr3.push(1);
            this.position3 = 0;
            item.sequence=index+1;//设置序号
          }else{
            if(this.order3[index].random === this.order3[index-1].random ){
              this.spanArr3[this.position3] += 1;//连续有几行项目名名称相同
              this.spanArr3.push(0); // 名称相同后往数组里面加一项0
            //   console.log(this.spanArr)
              //当项目名称相同时，设置当前序号和前一个相同
              this.order3[index].sequence = this.order3[index-1].sequence;
            }else{
              this.spanArr3.push(1);
              this.position3 = index;
              //当项目名称不同时，将当前序号设置为前一个序号+1
              this.order3[index].sequence = this.order3[index-1].sequence+1;
            }
          }
        
        })
        }



         
        else{

        }
        //    console.log(this.order1);
        //       console.log(this.order2);
        //          console.log(this.order3);
        })
    },
    fahuo(random,id)
    {
         console.log(random,id)
       this.$confirm('您确定现在发货?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          let o_id="";
     let o_content="";
      for(let i=0;i<this.res.length;i++)
      {
        console.log(this.res[i].o_id,id)
        if(this.res[i].o_id==id)
        {
          
          var zhis=JSON.parse(this.res[i].o_content);
          console.log("zhi",zhis.length);
        for(let j=0;j<zhis.length;j++)
        {
         console.log(random,zhis[j].random)
          if(random==zhis[j].random)
          {
              
            zhis[j].status=1;
          }
        }
        this.res[i].o_content=JSON.stringify(zhis);
        o_id=id;
        o_content=JSON.stringify(zhis);
        }
        // console.log("content1",this.res)
        // console.log(JSON.parse(this.res[i].o_content))
      }
      this.$axios.post("http://127.0.0.1:8081/client/updateorder",{
        o_id:o_id,
        o_content:o_content

      }).then(res=>
      {
             this.listLoading=false;
      if(res.data.status==1)
      {
           this.$message({
            type: 'success',
            message: '发货成功!'
          });
      }
      else{
          this.$message({
            type: 'success',
            message: '发货失败'
          });
      }
       this.reload();
        //  this.getorder();
      })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
},
created () {
        this.getorder();
    
}
}
</script>

<style>

</style>
